<template>
  <div class="guide-container">
    <el-card class="box-card">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <span style="color: #58bc58; font-size: 18px">题目详情：</span>
          </template>
          <div class="guide-title">
            <p>
              可选专业：
              <span v-text="form.professional"></span>
            </p>
            <p>
              题目申报时间：
              <span v-text="form.contactTime"></span>
            </p>
            <p>
              题目类型：
              <span v-text="form.type"></span>
            </p>
            <p>
              题目来源：
              <span v-text="form.resource"></span>
            </p>
            <p>
              选择模式：
              <span v-text="form.model"></span>
            </p>
            <p>
              题目所属专业：
              <span v-text="form.titleProfessional"></span>
            </p>
            <p>
              指导老师：
              <span v-text="form.teacher"></span>
            </p>
            <p>
              教师职称：
              <span v-text="form.teacherTitle"></span>
            </p>
            <p>
              倒是联系邮箱：
              <span v-text="form.email"></span>
            </p>
            <p>
              学生姓名：
              <span v-text="form.studentName"></span>
            </p>
            <p>
              学生院系专业：
              <span v-text="form.departments"></span>
            </p>
          </div>
        </el-collapse-item>
      </el-collapse>
      <h3 style="color: #58bc58">上传文献综述</h3>
      <div class="original-upload">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">上传有关外文译文的附件，支持附件格式为doc，docx，pdf，wps，rar，zip</div>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      form: {
        title: "多福多寿",
        professional: "范德萨发",
        time: "打发范德萨",
        resource: "大幅度安抚",
        model: "打发的发",
        titleProfessional: "打发答案是发送到",
        teacher: " 打发士大夫撒发",
        teacherTitle: "范德萨范德萨",
        contactTime: "发士大夫撒发的",
        studentName: "发大水发生",
        departments: "法大放送",
        email: "发生的发生",
        type: "打算"
      }
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    addGuideNews() {
      this.dialogFormVisible = true;
    },
    guideOnSubmit() {
      this.dialogFormVisible = false;
      console.log("弹窗内容", this.dialogForm);
    }
  }
};
</script>
<style lang='scss' scoped>
.guide-container {
  padding: 20px;
}

.guide-title {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  align-content: center;
  p {
    width: 200px;
    margin-right: 20px;
    color: black;
    span {
      color: rgb(101, 152, 219);
    }
  }
}

.original-upload {
  display: flex;
  justify-content: space-around;
}
</style>